<template>
  <view :class="['my', themeClass]">
    <view class="avatar">
      <image :src="avatar" />
    </view>
    <uni-notice-bar class="notice-bar" showIcon :speed="40" single scrollable color="#2979FF" background-color=""
      text="手机壁纸图片有时效，及时下载保存~ 下载失败，复制地址到浏览器下载~" />
    <view class="menu">
      <view class="content">
        <view class="item" @click="goHistory" hover-class="hover-view" custom-class="transition" :hover-stay-time="200">
          <image :src="historyImg" />
          <text>历史记录</text>
        </view>
        <view class="item" @click="goCollection" hover-class="hover-view" custom-class="transition"
          :hover-stay-time="200">
          <image :src="collectImg" />
          <text>我的收藏</text>
        </view>
        <view class="item" @click="changeTheme" hover-class="hover-view" custom-class="transition"
          :hover-stay-time="200">
          <template v-if="themeClass === 'light'">
            <image :src="light" />
            <text>亮色模式</text>
          </template>
          <template v-else>
            <image :src="dark" />
            <text>暗色模式</text>
          </template>
        </view>
      </view>
      <view class="option">
        <view class="optItem" @click="changePixivType" hover-class="hover-view" custom-class="transition"
          :hover-stay-time="200">
          <view class="title">
            <image :src="pixivIcon" />
            <text>Pixiv类型</text>
          </view>
          <view class="value">
            <text v-if="pixivType == 0">性感</text>
            <text v-else-if="pixivType == 1">R18</text>
            <text v-else>全部</text>
            <image :src="rightIcon" />
          </view>
        </view>
        <view class="optItem">
          <view class="title">
            <image :src="versionIcon" />
            <text>版本</text>
          </view>
          <view class="value">
            <text>v {{ version }}</text>
            <image :src="rightIcon" />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { useTheme } from '@/hooks/useTheme'
import avatar from '@/static/images/icon.png'
import rightIcon from '@/static/images/right.png'
import pixivIcon from '@/static/images/Pixiv.png'
import versionIcon from '@/static/images/Version.png'
import historyImg from '@/static/images/history.gif'
import collectImg from '@/static/images/collect.gif'
import light from '@/static/images/light.gif'
import dark from '@/static/images/dark.gif'
import { storeToRefs } from 'pinia'
import { themeStore, useImgInfoStore } from '@/stores'
import { ref, onMounted } from 'vue'
useTheme()
const setTheme = themeStore()
const { themeClass } = storeToRefs(setTheme)
const { pixivType } = storeToRefs(useImgInfoStore())
const version: any = ref('')
const goHistory = () => {
  uni.navigateTo({
    url: '/pages/history/history'
  })
}
const goCollection = () => {
  uni.navigateTo({
    url: '/pages/collection/collection'
  })
}
const changeTheme = () => {
  themeClass.value = themeClass.value === 'light' ? 'dark' : 'light'
  plus.nativeUI.setUIStyle(themeClass.value)
  setTheme.setNavigationBarColorHandler()
}
const changePixivType = () => {
  if (pixivType.value == 0) return pixivType.value = 1
  if (pixivType.value == 1) return pixivType.value = 2
  if (pixivType.value == 2) return pixivType.value = 0
}
onMounted(() => {
  version.value = uni.getSystemInfoSync().appWgtVersion
})
</script>

<style scoped lang="scss">
.my {
  padding: var(--status-bar-height) 20rpx;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

  .avatar {
    padding: 30px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0.3em 0.3em 0.7em var(--shadow);
    transition: border 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    image {
      width: 150px;
      height: 150px;
      border-radius: 50%;
    }
  }

  .notice-bar {
    margin: 10px 0;
    border-radius: 20px;
    overflow: hidden;
    height: 30px;
    background-color: #00a6ff26;
    box-shadow: 0.3em 0.3em 0.7em var(--shadow);
    transition: border 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  .menu {
    flex: 1;
    overflow: scroll;
    box-sizing: border-box;
    padding: 10rpx;

    .content {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
      gap: 10px;
      margin: 10px 0;

      .item {
        box-shadow: 0.3em 0.3em 0.7em var(--shadow);
        transition: border 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 5px;
        gap: 5px;
        font-size: 15px;
        color: grey;
        font-weight: bold;
        border-bottom: 1px solid var(--borderColor);
        border-radius: 5px;

        image {
          width: 60px;
          height: 60px;
          border-radius: 50%;
        }
      }
    }

    .option {
      box-shadow: 0em 0em 0.7em var(--shadow);
      transition: border 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      display: grid;
      gap: 5px;
      padding: 10px 5px;

      .optItem {
        display: flex;
        justify-content: space-between;
        font-weight: bold;
        box-shadow: 0em 0em 0.7em var(--shadow);
        transition: border 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        padding: 7px;
        border-radius: 5px;
        color: grey;
        border-bottom: 1px solid var(--borderColor);

        .title {
          display: flex;
          align-items: center;
          gap: 5px;

          image {
            width: 25px;
            height: 25px;
            border-radius: 50%;
          }
        }

        .value {
          display: flex;
          align-items: center;
          gap: 5px;

          text {
            font-size: 14px;
          }

          image {
            width: 25px;
            height: 25px;
            border-radius: 50%;
          }
        }
      }
    }
  }

}
</style>